<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_CSS3D-坐标系</title>
  <!-- 
  在 CSS 中，坐标系主要用于确定元素在页面上的位置和布局。理解 CSS 的坐标系对于实现精确的布局和设计非常重要。
  1. 坐标系的基本概念
  - 文档流：CSS 的初始坐标系基于文档流（document flow），即元素在页面中按顺序排列，从上到下、从左到右。
  - 坐标系原点：在 CSS 中，坐标系的原点（0, 0）通常位于包含块的左上角。

  2. 定位属性
  CSS 提供了几种定位方式来控制元素的位置：

   1. 静态定位（static）
  - 默认定位方式，元素按照文档流进行排列。
  - 无法使用  `top` 、 `right` 、 `bottom`  和  `left`  属性进行调整。

   2. 相对定位（relative）
  - 元素相对于其原始位置进行定位。
  - 使用  `top` 、 `right` 、 `bottom`  和  `left`  属性可以调整元素的位置，但仍保留在文档流中。

   3. 绝对定位（absolute）
  - 元素相对于最近的已定位祖先元素（即 position 属性不为 static 的元素）进行定位。
  - 使用  `top` 、 `right` 、 `bottom`  和  `left`  属性可以精确控制元素的位置。
  - 不占据文档流空间。

   4. 固定定位（fixed）
  - 元素相对于浏览器窗口进行定位。
  - 即使页面滚动，元素也保持在指定位置。
  - 使用  `top` 、 `right` 、 `bottom`  和  `left`  属性进行控制。

   5. 粘性定位（sticky）
  - 元素在特定的滚动位置时切换其定位方式。
  - 元素在滚动到某个位置之前是相对定位，达到该位置后变为固定定位。

  3. 坐标系的计算
  - 左上角：在 CSS 中，元素的  `top`  和  `left`  属性是基于其包含块的左上角来计算的。
  - 坐标值：可以使用像素（px）、百分比（%）、视口单位（vw、vh）等单位来设置元素的位置。

  4. 变换（transform）
  - CSS 还提供了  `transform`  属性，可以对元素进行平移、旋转、缩放等变换。
  - 使用  `translate`  函数可以相对于元素的原始位置进行移动。

  5. 总结
  CSS 中的坐标系是理解网页布局的基础。通过不同的定位方式，开发者可以灵活地控制元素在页面上的位置。理解这些概念和属性的使用，可以帮助开发者实现更复杂和精确的布局。掌握坐标系的计算和变换功能，可以进一步增强页面的交互性和视觉效果。
  -->
  <style>
    body {
      margin: 0;
      padding: 0;
      background-image: url(../images/grid.png);
    }

    .box{
      width: 200px;
      height: 100px;
      background-color: skyblue;

      /* 形变 */
      /* transform: translateX(100px) rotate(45deg); */
      transform: rotate(45deg) translateX(100px);

      /* 修改坐标的原点 */
      transform-origin: bottom;
    }
  </style>
</head>
<body>

  <div class="box">div</div>
  
</body>
</html>